<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-切换商品页面</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      .main {
        width: 720px;
        margin: 50px auto;
      }
      .tab {
        height: 38px;
        width: 320px;
        border: 1px solid #ccc;
        margin-bottom: -1px;
      }
      .tab > .active {
        border-top-color: red;
      }
      .tab > li {
        border-top: 4px solid #fff;
        float: left;
        height: 32px;
        line-height: 32px;
      }

      .tab > li > a {
        display: inline-block;
        width: 80px;
        height: 32px;
        text-align: center;
        color: #000;
      }
      .products {
        width: 720px;
        height: 505px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
      }
      .products > img {
        display: none;
      }
      .products > .show {
        display: block;
      }
    </style>
  <script>
    window.onload = function () {
      let liEles = document.getElementsByTagName("li");
      let aEles = document.getElementsByTagName("a");
      for (let i = 0; i < aEles.length; i++) {
        let aEle = aEles[i];
        aEle.onclick = function () {
          for (let j = 0; j < liEles.length; j++) {
            let tab = liEles[j];
            tab.className = "";
          }
          let parentNode = aEle.parentNode;
          parentNode.className = "active";

          let imgEles = document.getElementsByTagName("img");
          for (let j = 0; j < imgEles.length; j++) {
            let imgEle1 = imgEles[j];
            imgEle1.className="";
          }
          for (let j = 0; j < imgEles.length; j++) {
            let imgEle = imgEles[j];
            if(imgEle.alt == aEle.innerText){
              imgEle.className = "show";
            }
          }
        }
      }
    }
  </script>
</head>
  <body>
  <div class="main">
    <ul class="tab" id="tab">
      <!--设置class属性值为active，为了设置导航栏顶部的红色线条-->
      <li class="active">
        <a href="javascript:;">母婴用品</a>
      </li>
      <li><a href="javascript:;">厨房用品</a></li>
      <li><a href="javascript:;">美容护肤</a></li>
      <li><a href="javascript:;">生活电器</a></li>
    </ul>
    <div class="products" id="products">
      <!--设置class属性值为show，为了显示出对应的商品图片-->
      <img class="show" src="../image/myyp.png" alt="母婴用品">
      <img src="../image/cfyp.png" alt="厨房用品">
      <img src="../image/mrhf.png" alt="美容护肤">
      <img src="../image/shdq.png" alt="生活电器">
    </div>
  </div>
  </body>
</html>